<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一件代发平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            font-size: 14px;
        }

        /* 头部样式 */
        .header {
            background-color: #ffffff;
            padding: 12px 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .header-title {
            font-size: 20px;
            font-weight: 700;
            color: #ff5500;
        }

        .service-tags {
            display: flex;
            gap: 8px;
        }

        .service-tag {
            padding: 4px 8px;
            background: #f9f9f9;
            border-radius: 12px;
            font-size: 12px;
            color: #666;
            border: 1px solid #eee;
        }

        /* 搜索区域 */
        .search-area {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .search-container {
            flex: 1;
            display: flex;
            background: #f5f7fa;
            border-radius: 20px;
            padding: 5px 15px;
            align-items: center;
        }

        .search-input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 8px 10px;
            font-size: 14px;
            outline: none;
        }

        .search-btn {
            background: transparent;
            border: none;
            color: #999;
            font-size: 16px;
            cursor: pointer;
        }

        .batch-search-btn {
            background: #ff5500;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 0 15px;
            font-weight: 500;
            cursor: pointer;
        }

        /* 筛选区域 */
        .filters {
            padding: 15px;
            background: white;
            border-bottom: 1px solid #eee;
        }

        .section-title {
            font-weight: 600;
            margin: 8px 0;
            color: #333;
            font-size: 15px;
        }

        .categories, .services, .sort-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 10px 0;
        }

        .category, .service, .sort-option {
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 13px;
            border: 1px solid #eee;
            cursor: pointer;
        }

        .category:hover, .service:hover, .sort-option:hover {
            border-color: #ff5500;
            color: #ff5500;
        }

        .category.selected, .service.selected, .sort-option.selected {
            background: #fff8f0;
            border-color: #ff5500;
            color: #ff5500;
            font-weight: 500;
        }

        .platforms {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .platform {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            border-radius: 15px;
            border: 1px solid #eee;
            font-size: 12px;
        }

        .platform.active {
            background: #f0f8ff;
            border-color: #3399ff;
        }

        .platform-icon {
            margin-right: 4px;
            color: #666;
        }

        /* 商品列表 */
        .products-container {
            padding: 15px;
        }

        .products-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .products-count {
            color: #666;
        }

        .sort-select {
            background: #f5f7fa;
            border: none;
            border-radius: 15px;
            padding: 5px 10px;
            font-size: 13px;
            color: #666;
            outline: none;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
            gap: 15px;
        }

        .product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            position: relative;
            display: flex;
            flex-direction: column;
        }

        .select-checkbox {
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 2;
        }

        /* 新增图片容器样式 */
        .product-image-container {
            position: relative;
            height: 150px;
            overflow: hidden;
            background-color: #f8f9fa;
        }

        .product-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }

        .product-img:hover {
            transform: scale(1.05);
        }

        .platform-tag {
            position: absolute;
            top: 10px;
            right: 8px;
            background: rgba(51, 153, 255, 0.85);
            color: white;
            font-size: 11px;
            padding: 3px 6px;
            border-radius: 8px;
            z-index: 2;
        }

        .product-details {
            padding: 12px 10px;
            position: relative;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .product-title {
            font-size: 13px;
            height: 38px;
            overflow: hidden;
            margin-bottom: 5px;
            line-height: 1.4;
        }

        .product-price {
            color: #ff5500;
            font-weight: 700;
            font-size: 15px;
            margin-bottom: 6px;
        }

        .product-info {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
            line-height: 1.4;
        }

        .product-footer {
            display: flex;
            justify-content: space-between;
            margin-top: auto;
            padding-top: 8px;
        }

        .remove-btn {
            color: #999;
            font-size: 12px;
            background: none;
            border: none;
            cursor: pointer;
        }

        .purchase-btn {
            background: #ff5500;
            color: white;
            border: none;
            border-radius: 12px;
            padding: 4px 12px;
            font-size: 12px;
            cursor: pointer;
        }

        /* 底部操作栏 */
        .bottom-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 10px 15px;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        .select-all {
            display: flex;
            align-items: center;
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }

        .checkbox-label {
            margin-left: 8px;
        }

        .selected-info {
            margin-left: 15px;
            color: #666;
        }

        .batch-purchase-btn {
            background: #ff5500;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 25px;
            font-weight: 500;
            cursor: pointer;
        }

        /* 响应式调整 */
        @media (min-width: 768px) {
            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
        }

        @media (max-width: 480px) {
            .section-title {
                font-size: 14px;
            }

            .category, .service, .sort-option {
                padding: 4px 10px;
                font-size: 12px;
            }

            .header-title {
                font-size: 18px;
            }

            .filters {
                padding: 10px;
            }
        }

        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 30px;
            color: #999;
        }

        .skeleton {
            background: #f0f0f0;
            border-radius: 4px;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { opacity: 0.5; }
            50% { opacity: 0.8; }
            100% { opacity: 0.5; }
        }

        /* 新增样式 */
        .service-tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 5px;
        }

        .service-tag-item {
            background: #f0f8ff;
            color: #3399ff;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            white-space: nowrap;
        }

        .price-range {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .error-message {
            padding: 15px;
            background: #ffebee;
            color: #f44336;
            border-radius: 4px;
            margin: 15px;
            text-align: center;
        }

        .confirmation-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }

        .modal-content {
            background: white;
            border-radius: 8px;
            padding: 20px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }

        .modal-header {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }

        .modal-body {
            margin-bottom: 20px;
            color: #666;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .modal-btn {
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
        }

        .cancel-btn {
            background: #f5f7fa;
            color: #666;
            border: 1px solid #eee;
        }

        .confirm-btn {
            background: #ff5500;
            color: white;
            border: none;
        }

        /* 图片错误处理样式 */
        .image-error {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            background: #f0f0f0;
            color: #999;
            font-size: 12px;
            text-align: center;
            padding: 10px;
        }
        .pagination-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
            margin-top: 20px;
        }

        /* 分页列表 */
        .pagination {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 8px;
        }

        .page-item {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page-link {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            padding: 0 8px;
            border-radius: 8px;
            background: white;
            color: #555;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            border: 1px solid #e1e4e8;
            transition: all 0.2s ease;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .page-link:hover {
            background-color: #f0f2f5;
            border-color: #d0d7de;
            transform: translateY(-1px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.08);
        }

        .page-link.active {
            background: linear-gradient(135deg, #ff7a45, #ff5500);
            color: white;
            border-color: #ff5500;
            box-shadow: 0 2px 6px rgba(255, 85, 0, 0.3);
        }

        .page-link.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        .page-link i {
            font-size: 12px;
        }

        .page-info {
            font-size: 14px;
            color: #666;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .page-info strong {
            color: #333;
            font-weight: 600;
        }

        .page-size-selector {
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid #e1e4e8;
            background: white;
            font-size: 14px;
            color: #555;
            outline: none;
            transition: all 0.2s ease;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .page-size-selector:hover {
            border-color: #d0d7de;
            box-shadow: 0 2px 5px rgba(0,0,0,0.08);
        }

        .page-size-selector:focus {
            border-color: #ff5500;
            box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.15);
        }

        .divider {
            height: 24px;
            width: 1px;
            background: #e1e4e8;
            margin: 0 10px;
        }

        .info-group {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .pagination-container {
                flex-direction: column;
                gap: 15px;
            }

            .info-group {
                flex-wrap: wrap;
                justify-content: center;
            }

            .divider {
                display: none;
            }
        }
        /* 新增批量操作区域样式 - 优化版 */
        .batch-actions-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            background: linear-gradient(135deg, #fff8f0, #fff0e6);
            border-radius: 12px;
            margin: 0 15px 15px;
            box-shadow: 0 4px 15px rgba(255, 85, 0, 0.15);
            border: 1px solid #ffe4d1;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .batch-actions-top:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, #ff7a45, #ff5500);
        }

        .batch-actions-top.active {
            background: linear-gradient(135deg, #fff0e6, #ffe4d1);
            box-shadow: 0 4px 20px rgba(255, 85, 0, 0.2);
        }

        .batch-info {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            font-weight: 500;
            color: #ff5500;
        }

        .batch-info i {
            font-size: 18px;
            background: rgba(255, 122, 69, 0.15);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .batch-select-btn {
            background: white;
            color: #ff5500;
            border: 1px solid #ffd8c2;
            border-radius: 24px;
            padding: 8px 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 8px rgba(255, 85, 0, 0.1);
        }

        .batch-select-btn:hover {
            background: #fff0e6;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 85, 0, 0.15);
        }

        .batch-select-btn:active {
            transform: translateY(0);
        }

        .batch-select-btn i {
            font-size: 16px;
            transition: transform 0.2s ease;
        }

        .batch-select-btn:hover i {
            transform: scale(1.1);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .batch-actions-top {
                flex-direction: column;
                gap: 12px;
                text-align: center;
                padding: 15px;
            }

            .batch-info {
                justify-content: center;
            }

            .batch-select-btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 顶部栏 -->
    <div class="header">
        <!-- 搜索区域 -->
        <div class="search-area">
            <div class="search-container">
                <i class="fas fa-search search-btn"></i>
                <input
                        type="text"
                        class="search-input"
                        placeholder="请输入关键词"
                        v-model="searchKeyword"
                        @keyup.enter="fetchData"
                >
            </div>
            <button class="batch-search-btn" @click="fetchData">搜索</button>
        </div>
    </div>

    <!-- 新增批量操作区域 -->
    <div class="batch-actions-top" :class="{active: isCurrentPageSelected}" v-if="filteredProducts.length > 0">
        <div class="batch-info">
            <i class="fas fa-check-circle"></i>
            <span>当前页已选 {{ selectedProducts.length }} / {{ filteredProducts.length }} 件商品</span>
        </div>
        <button class="batch-select-btn" @click="toggleSelectCurrentPage">
            <i class="fas" :class="isCurrentPageSelected ? 'fa-times' : 'fa-check-double'"></i>
            {{ isCurrentPageSelected ? '取消全选' : '全选当前页' }}
        </button>
    </div>

    <!-- 商品列表 -->
    <div class="products-container">
        <!-- 错误提示 -->
        <div v-if="error" class="error-message">
            {{ error }}
            <button @click="fetchData">重试</button>
        </div>

        <!-- 商品列表展示 -->
        <div class="products-grid" v-if="loading">
            <div v-for="i in 6" :key="'skeleton'+i" class="product-card">
                <div class="skeleton" style="height: 150px; width: 100%"></div>
                <div style="padding: 12px 10px;">
                    <div class="skeleton" style="height: 20px; width: 100%; margin-bottom: 8px"></div>
                    <div class="skeleton" style="height: 15px; width: 60px; margin-bottom: 8px"></div>
                    <div class="skeleton" style="height: 15px; width: 100%; margin-bottom: 5px"></div>
                    <div class="skeleton" style="height: 15px; width: 90%; margin-bottom: 5px"></div>
                    <div style="display: flex; justify-content: space-between; margin-top: 8px;">
                        <div class="skeleton" style="height: 20px; width: 70px;"></div>
                        <div class="skeleton" style="height: 20px; width: 60px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="products-grid" v-else-if="filteredProducts.length > 0">
            <div
                    class="product-card"
                    v-for="product in filteredProducts"
                    :key="product.itemId"
            >
                <input
                        type="checkbox"
                        class="select-checkbox"
                        v-model="selectedProducts"
                        :value="product.itemId"
                >
                <div class="platform-tag" v-if="product.platform">
                    {{ product.platform }}
                </div>

                <!-- 新增图片容器 -->
                <div class="product-image-container">
                    <img :src="product.imgUrl" class="img-responsive" referrerpolicy="no-referrer" alt=""/>
                </div>

                <div class="product-details">
                    <div class="product-title">{{ product.title }}</div>
                    <div class="product-price">
                        <span v-if="product.minPrice === product.maxPrice">
                            ￥{{ product.minPrice }}
                        </span>
                        <span v-else class="price-range">
                            ￥{{ product.minPrice }} - {{ product.maxPrice }}
                        </span>
                    </div>

                    <!-- 服务标签 -->
                    <div class="service-tags-container">
                        <span
                                v-for="service in product.serviceList"
                                :key="service.code"
                                class="service-tag-item"
                        >
                            {{ service.name }}
                        </span>
                    </div>

                    <div class="product-info">90天销量: {{ product.salesCnt90d }}件</div>
                    <div class="product-info">SKU数量: {{ product.skuCnt }}</div>

                    <div class="product-footer">
                        <button class="remove-btn" @click="removeSelection(product.itemId)">取消选中</button>
                        <button class="purchase-btn" @click="showConfirmation(product.itemId)">立即铺货</button>
                    </div>
                </div>
            </div>
        </div>

        <div v-else class="loading">
            没有找到相关商品
        </div>
    </div>


        <div class="pagination-container" v-if="totalRecords > 0">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" :class="{disabled: currentPage === 1}"
                       @click="changePage(currentPage - 1)">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                </li>

                <li class="page-item" v-for="page in visiblePages" :key="page">
                    <a class="page-link" :class="{active: page === currentPage}"
                       @click="changePage(page)">
                        {{ page }}
                    </a>
                </li>

                <li class="page-item">
                    <a class="page-link" :class="{disabled: currentPage === totalPages}"
                       @click="changePage(currentPage + 1)">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </li>
            </ul>

            <div class="page-info">
                第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
            </div>

            <div class="page-info">
                每页显示
                <select class="page-size-selector" v-model="pageSize" @change="changePageSize">
                    <option value="6">6</option>
                    <option value="12">12</option>
                    <option value="48">48</option>
                    <option value="100">100</option>
                </select>
                条
            </div>

            <div class="page-info">
                共 {{ totalRecords }} 条记录
            </div>


    </div>

    <!-- 底部操作栏 -->
    <div class="bottom-actions" v-if="selectedProducts.length > 0">
        <div class="select-all">
            <input type="checkbox" id="selectAll" v-model="selectAll">
            <label for="selectAll" class="checkbox-label">全选</label>
            <span class="selected-info">已选 {{ selectedProducts.length }} 件商品</span>
        </div>
        <button class="batch-purchase-btn" @click="showBatchConfirmation">批量铺货</button>
    </div>

    <!-- 确认铺货弹窗 -->
    <div class="confirmation-modal" v-if="showModal">
        <div class="modal-content">
            <div class="modal-header">
                {{ modalTitle }}
            </div>
            <div class="modal-body">
                {{ modalMessage }}
            </div>
            <div class="modal-footer">
                <button class="modal-btn cancel-btn" @click="cancelPurchase">取消</button>
                <button class="modal-btn confirm-btn" @click="confirmPurchase">确认铺货</button>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                // 分页相关数据
                totalRecords: 0,       // 总记录数
                currentPage: 1,        // 当前页码
                pageSize: 6,          // 每页显示条数
                totalPages: 0,         // 总页数
                visiblePages: [],      // 可见页码数组
                loading: true,
                error: null,
                categories: [],
                products: [],
                filteredProducts: [],
                selectedCategory: null,
                selectedServices: [],
                selectedPlatforms: [],
                searchKeyword: '',
                sortType: 'default',
                selectedProducts: [],
                serviceTags: ['一件代发', '包邮', '7天无理由退货', '晚揽必赔'],
                platforms: [
                    { id: 'taobao', name: '淘宝', icon: 'fab fa-tao' },
                    { id: 'douyin', name: '抖音', icon: 'fab fa-tiktok' },
                    { id: 'pdd', name: '拼多多', icon: 'fas fa-shopping-cart' },
                    { id: 'xiaohongshu', name: '小红书', icon: 'fas fa-book' },
                    { id: 'kuaishou', name: '快手', icon: 'fas fa-film' },
                    { id: 'jd', name: '京东', icon: 'fab fa-jedi-order' }
                ],
                // 新增弹窗相关数据
                showModal: false,
                modalTitle: '',
                modalMessage: '',
                currentProductId: null,
                batchPurchaseMode: false,
                imageError: false // 图片加载错误状态
            }
        },
        computed: {
            // 计算总页数
            totalPages() {
                return Math.ceil(this.totalRecords / this.pageSize);
            },
            // 新增计算属性：当前页是否全选
            isCurrentPageSelected() {
                if (this.filteredProducts.length === 0) return false;
                return this.selectedProducts.length === this.filteredProducts.length;
            },
            selectAll: {
                get() {
                    return this.selectedProducts.length === this.filteredProducts.length;
                },
                set(value) {
                    if (value) {
                        this.selectedProducts = this.filteredProducts.map(p => p.itemId);
                    } else {
                        this.selectedProducts = [];
                    }
                }
            }
        },
        watch: {
            // 当前页变化时更新可见页码
            currentPage() {
                this.updateVisiblePages();
            },

            // 总页数变化时更新可见页码
            totalPages() {
                this.updateVisiblePages();
            },

            selectedCategory() {
                this.filterProducts();
            },
            selectedServices() {
                this.filterProducts();
            },
            selectedPlatforms() {
                this.filterProducts();
            }
        },
        mounted() {
            this.fetchData();
        },
        methods: {
            toggleSelectCurrentPage() {
                if (this.isCurrentPageSelected) {
                    // 取消全选当前页
                    const currentPageIds = this.filteredProducts.map(p => p.itemId);
                    this.selectedProducts = this.selectedProducts.filter(
                            id => !currentPageIds.includes(id)
                    );
                } else {
                    // 全选当前页
                    const currentPageIds = this.filteredProducts.map(p => p.itemId);
                    const newSelected = [...new Set([...this.selectedProducts, ...currentPageIds])];
                    this.selectedProducts = newSelected;
                }
            },

            async fetchData() {
                this.loading = true;
                this.error = null;
                try {
                    // 构建请求URL，添加关键词参数
                    let url = '/index/wanlshop/goods/cateAdlibaba';
                    const params = [];

                    if (this.searchKeyword) {
                        params.push(`keyword=${encodeURIComponent(this.searchKeyword)}`);
                    }

                    // 添加分页参数
                    params.push(`page=${this.currentPage}`);
                    params.push(`pageSize=${this.pageSize}`);

                    if (params.length > 0) {
                        url += '?' + params.join('&');
                    }

                    const response = await fetch(url);

                    if (!response.ok) {
                        throw new Error(`请求失败: ${response.status}`);
                    }

                    const result = await response.json();

                    if (result.rows && Array.isArray(result.rows)) {
                        this.products = result.rows;
                        this.filteredProducts = [...this.products];

                        // 设置分页信息
                        this.totalRecords = result.totalRecords || 0;
                        this.currentPage = result.currentPage || 1;
                        this.pageSize = result.pageSize || 12;

                        // 计算总页数
                        this.totalPages = Math.ceil(this.totalRecords / this.pageSize);

                        // 更新可见页码
                        this.updateVisiblePages();
                    } else {
                        throw new Error('返回数据格式不正确');
                    }
                } catch (err) {
                    this.error = err.message || '加载数据失败';
                    console.error('请求失败:', err);
                } finally {
                    this.loading = false;
                }
            },

            // 更新可见页码数组
            updateVisiblePages() {
                const pages = [];
                const maxVisiblePages = 5; // 最多显示5个页码

                // 计算起始页码
                let startPage = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2));
                let endPage = startPage + maxVisiblePages - 1;

                if (endPage > this.totalPages) {
                    endPage = this.totalPages;
                    startPage = Math.max(1, endPage - maxVisiblePages + 1);
                }

                for (let i = startPage; i <= endPage; i++) {
                    pages.push(i);
                }

                this.visiblePages = pages;
            },

            // 改变页码
            changePage(page) {
                if (page < 1 || page > this.totalPages || page === this.currentPage) {
                    return;
                }

                this.currentPage = page;
                this.fetchData();
            },

            // 改变每页显示数量
            changePageSize() {
                this.currentPage = 1; // 重置到第一页
                this.fetchData();
            },

            // 处理图片加载错误
            handleImageError(event) {
                console.error('图片加载失败:', event.target.src);
                this.imageError = true;
                // 可以在这里设置默认图片
                // event.target.src = 'https://via.placeholder.com/150?text=图片加载失败';
            },

            showConfirmation(productId) {
                this.currentProductId = productId;
                this.batchPurchaseMode = false;
                this.modalTitle = '确认铺货';
                this.modalMessage = `确定要铺货商品ID: ${productId} 吗？`;
                this.showModal = true;
            },

            showBatchConfirmation() {
                this.batchPurchaseMode = true;
                this.modalTitle = '批量铺货确认';
                this.modalMessage = `确定要铺货选中的 ${this.selectedProducts.length} 件商品吗？`;
                this.showModal = true;
            },

            cancelPurchase() {
                this.showModal = false;
                this.currentProductId = null;
            },

            async confirmPurchase() {
                try {
                    if (this.batchPurchaseMode) {
                        // 批量铺货逻辑
                        const response = await fetch('/index/wanlshop/goods/batch', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                productIds: this.selectedProducts
                            })
                        });

                        if (!response.ok) {
                            throw new Error('批量铺货失败');
                        }

                        const result = await response.json();
                        if (result.success) {
                            alert(`批量铺货成功，共铺货 ${this.selectedProducts.length} 件商品`);
                            this.selectedProducts = [];
                        } else {
                            throw new Error(result.message || '批量铺货失败');
                        }
                    } else {
                        // 单个铺货逻辑
                        const response = await fetch('/api/purchase/single', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                productId: this.currentProductId
                            })
                        });

                        if (!response.ok) {
                            throw new Error('铺货失败');
                        }

                        const result = await response.json();
                        if (result.success) {
                            alert(`商品ID: ${this.currentProductId} 铺货成功`);
                        } else {
                            throw new Error(result.message || '铺货失败');
                        }
                    }
                } catch (err) {
                    console.error('铺货操作失败:', err);
                    alert(`铺货失败: ${err.message}`);
                } finally {
                    this.showModal = false;
                    this.currentProductId = null;
                }
            },

            // 其他方法保持不变...
            selectCategory(categoryId) {
                this.selectedCategory = this.selectedCategory === categoryId ? null : categoryId;
            },

            toggleService(service) {
                if (this.selectedServices.includes(service)) {
                    this.selectedServices = this.selectedServices.filter(s => s !== service);
                } else {
                    this.selectedServices.push(service);
                }
            },

            togglePlatform(platformId) {
                if (this.selectedPlatforms.includes(platformId)) {
                    this.selectedPlatforms = this.selectedPlatforms.filter(p => p !== platformId);
                } else {
                    this.selectedPlatforms.push(platformId);
                }
            },

            changeSort(sortType) {
                this.sortType = sortType;
                this.sortProducts();
            },

            filterProducts() {
                let filtered = [...this.products];

                // 按类目筛选
                if (this.selectedCategory) {
                    filtered = filtered.filter(p => p.categoryId === this.selectedCategory);
                }

                // 按服务筛选
                if (this.selectedServices.length > 0) {
                    filtered = filtered.filter(p =>
                            this.selectedServices.every(service =>
                                    p.services.includes(service)
                            )
                    );
                }

                // 按平台筛选
                if (this.selectedPlatforms.length > 0) {
                    filtered = filtered.filter(p =>
                                    p.platform && this.selectedPlatforms.some(platformId =>
                                            this.platforms.find(pf => pf.id === platformId).name === p.platform
                                    )
                    );
                }

                // 按关键词搜索
                if (this.searchKeyword) {
                    const keyword = this.searchKeyword.toLowerCase();
                    filtered = filtered.filter(p =>
                            p.name.toLowerCase().includes(keyword) ||
                            p.platform.toLowerCase().includes(keyword) ||
                            p.shipment.toLowerCase().includes(keyword)
                    );
                }

                // 临时保存筛选结果用于排序
                this.filteredProducts = filtered;
                this.sortProducts();
            },

            sortProducts() {
                if (!this.sortType || this.sortType === 'default') return;

                this.filteredProducts.sort((a, b) => {
                    if (this.sortType === 'price') {
                        return parseFloat(a.price) - parseFloat(b.price);
                    } else if (this.sortType === 'sales') {
                        const salesA = parseInt(a.monthlySales.replace(/[^\d]/g, ''));
                        const salesB = parseInt(b.monthlySales.replace(/[^\d]/g, ''));
                        return salesB - salesA;
                    } else if (this.sortType === 'time') {
                        return b.publishYear.localeCompare(a.publishYear);
                    }
                    return 0;
                });
            },

            removeSelection(productId) {
                this.selectedProducts = this.selectedProducts.filter(id => id !== productId);
            }
        }
    });
</script>
</body>
</html>